<template>
	<div class="job-intention">
		<div class="edit-btn" v-if="editState == 0" @click="editState = 1"><img src="@/assets/me/edit.png"><span>修改</span></div>
		<div class="title">求职意向</div>
		<div class="job-content" v-if="editState == 0">
			<div class="content-item" v-if="form.currentState">
			求职状态：{{form.currentState == 1?"在职，但考虑换个环境":"已离职"}}
			</div>
			<div class="content-item" v-else>
			求职状态：未添加
			</div>
			<div class="content-item" v-if="form.jobCategory">
			工作性质：{{form.jobCategory == 1?"全职":(form.jobCategory == 2?"兼职":"实习")}}
			</div>
			<div class="content-item" v-else>
				工作性质：未添加
			</div>
			<div class="content-item">
			期望行业：{{form.expectIndustry || '未添加'}}
			</div>
			<div class="content-item">
			期望职位：{{form.expectPosition || '未添加'}}
			</div>
			<div class="content-item">
			工作地区：{{form.workArea || '未添加'}}
			</div>
			<div class="content-item">
			期望薪资：{{form.expectSalary || '未添加'}}
			</div>
		</div>
		<div class="job-edit" v-if="editState == 1">
			<div class="content">
				<el-form ref="form" :model="form" :rules="rules" label-width="85px" label-position="left" class="flex" hide-required-asterisk>
					<div class="edit-left flex-item">
						<div class="edit-item flex">
							<div class="red-dian"></div>
							<el-form-item label="目前状态：" class="flex-item" prop="currentState">
								<el-select v-model="form.currentState" placeholder="请选择目前状态" class="select-input">
									<el-option label="在职，但考虑换个环境" value="1"></el-option>
									<el-option label="已离职" value="2"></el-option>
								</el-select>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian hide"></div>
							<el-form-item label="期望行业：" class="flex-item">
								<el-select v-model="form.expectIndustry" placeholder="请选择行业" class="select-input">
									<el-option v-for="(items,index) in belongsIndustry" :key="index" :label="items.name" :value="items.name"></el-option>
								</el-select>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian"></div>
							<el-form-item label="工作地区：" class="flex-item" prop="workArea">
								<el-select v-model="form.workArea" placeholder="请选择工作地区" class="select-input">
									<el-option v-for="(items,index) in areaSelect" :key="index" :label="items.name" :value="items.name"></el-option>
								</el-select>
							</el-form-item>
						</div>
					</div>
					<div class="edit-right flex-item">
						<div class="edit-item flex">
							<div class="red-dian"></div>
							<el-form-item label="工作性质：" class="flex-item" prop="jobCategory">
								<el-radio v-model="form.jobCategory" label="1">全职</el-radio>
								<el-radio v-model="form.jobCategory" label="3">实习</el-radio>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian"></div>
							<el-form-item label="期望职位：" class="flex-item"  prop="expectPosition">
								<el-input v-model="form.expectPosition" placeholder="请输入期望职位"></el-input>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian"></div>
							<el-form-item label="期望薪资：" class="flex-item" prop="expectSalary">
								<el-select v-model="form.expectSalary" placeholder="请选择期望薪资" class="select-input">
									<el-option  v-for="(items,index) in salarySelect" :key="index" :label="items.name" :value="items.name"></el-option>
								</el-select>
							</el-form-item>
						</div>
					</div>
				</el-form>
				<div class="form-option">
					<div class="save qida-success-btn" @click="saveEdit">保存</div>
					<div class="cancel qida-cancel-btn" @click="editState = 0">取消</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import {updateResumeIntention} from '@/api/me/resume'
import {findBaseData} from '@/api/base'
	export default {
		name:'job-intention',
		props:['resumeIntentions'],
		data: function() {
			return {
				editState:0,//0:显示，1：编辑
				form:{
					"currentState": "",
					"expectIndustry": "",
					"expectPosition": "",
					"expectSalary": "",
					"jobCategory": "",
					"resumeId": this.$route.query.id,
					"workArea": "",
					id: 0,
				},
				rules: {
					currentState: [{ required: true, trigger: "blur", message: "请选择目前状态" }],
					workArea: [{ required: true, trigger: "blur", message: "请选择工作地区" }],
					jobCategory: [{ required: true, trigger: "blur", message: "请选择工作性质" }],
					expectPosition: [{ required: true, trigger: "blur", message: "请输入期望职位" }],
					expectSalary: [{ required: true, trigger: "blur", message: "请选择期望薪资" }]
				},
				areaSelect:[],
				salarySelect:[],
				belongsIndustry:[]
			}
		},
		watch:{
			resumeIntentions(val){
				if(val.length>0){
					this.form = val[0];
				}
				this.form.resumeId=this.$route.query.id;
			}
		},
		created() {
			this.getArea();
			this.getSalary();
			this.getBelongsIndustry();
		},
		methods: {
			saveEdit(){
				this.$refs.form.validate(valid => {
					if (valid) {
						updateResumeIntention(this.form).then(res => {
							this.$message.success('保存成功');
							this.editState=0;
						}).catch(err => {
							this.$message.error(err);
						})
					}
				})
			},
			getArea(){
				var data={
					data:'area'
				}
				findBaseData(data).then(res => {
					this.areaSelect=res.datas[0].children;
				}).catch(err => {
					this.$message.error(err);
				})
			},
			getSalary(){
				var data={
					data:'salary'
				}
				findBaseData(data).then(res => {
					this.salarySelect=res.datas[0].children;
				}).catch(err => {
					this.$message.error(err);
				})
			},
			getBelongsIndustry(){
				var data={
					data:'belongsIndustry'
				}
				findBaseData(data).then(res => {
					this.belongsIndustry=res.datas[0].children;
				}).catch(err => {
					this.$message.error(err);
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.job-intention{
		width: 100%;
		position: relative;
		margin: 30px 0;
		.edit-btn{
			color: #3EABC4;
			position: absolute;
			right: 0;
			top: 0;
			cursor: pointer;
			img{
				vertical-align: middle;
				margin-top: -2px;
				margin-right: 3px;
			}
		}
		.title{
			font-size: 16px;
			font-weight: bold;
			color: #3EABC4;
			border-left:4px solid #3EABC4;
			text-indent: 10px;
		}
		.job-content{
			overflow: hidden;
			margin-top: 30px;
			color: #787878;
			.content-item{
				float: left;
				width: 373px;
				line-height: 30px;
				padding-right: 10px;
			}
		}
		.job-edit{
			.content{
				margin-top: 25px;
				padding-bottom: 20px;
				.edit-left{
					padding-right: 80px;
					
				}
				.edit-right{
					padding-right: 40px;
					
				}
				.edit-item{
					
					.el-form-item{
						margin-bottom: 20px;
						.el-form-item__label{
							font-weight: normal;
							color: #777777;
						}
						.el-input__inner{
							border-radius: 0px;
						}
						.select-input{
							width: 100%;
						}
						
					}
					.red-dian{
						width: 5px;
						height: 5px;
						border-radius: 2.5px;
						background-color: #d92032;
						margin-right: 5px;
						margin-top: 16px;
					}
					.red-dian.hide{
						opacity: 0;
					}
				}
				.form-option{
					margin-top: 10px;
					padding-left: 10px;
					.save{
						margin-right: 15px;
					}
					
				}
			}
		}
	}
</style>
